<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "我的行程",
    },
}
</route>

<template>
    <view class="m-base-box m-journey">
        <wd-fab position="right-center" :expandable="false" :draggable="true" @click="handleClick"> </wd-fab>
        <view class="px-4">
            <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
                <wd-cell-group border>
                    <wd-cell
                        :title="item.title"
                        v-for="(item, index) in list"
                        :key="item.id"
                        title-width="100%"
                        clickable
                        @click="detail(item.id)"
                    >
                        <template #label>
                            <view class="flex justify-between items-center">
                                <view>
                                    <wd-tag type="success" mark v-if="item.status == '已完成'">{{ item.status }}</wd-tag
                                    ><wd-tag type="danger" mark v-else>{{ item.status }}</wd-tag>
                                </view>
                                <wd-text
                                    :text="item.updateTime || item.createTime"
                                    size="10px"
                                    color="#000"
                                    prefix="最后更新："
                                ></wd-text>
                            </view>
                        </template>
                    </wd-cell>
                </wd-cell-group>
                <view v-for="(item, index) in list" :key="item.id" class="m-heritage-item pb-[20rpx]"> </view>
                <wd-loadmore custom-class="loadmore" :state="loading" :finished-text="finishedText" />
            </scroll-view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getPlanUsingGet } from "@/service/app";
const scrollTop = ref(0);
function loadMore() {
    if (noLoading.value) return; // 如果数据全部加载完成了，就不再加载更多
    queryParams.value.current += 1;
    getList();
    console.log("加载更多");
}
const queryParams = ref({
    current: 1,
    size: 10,
});
const list = ref<any>([]);
const total = ref(0);
const loading = ref<any>("loading");
const finishedText = ref("加载完成");
const noLoading = ref(false); // 数据是否全部加载完成了
function getList() {
    loading.value = "loading";
    getPlanUsingGet({ params: queryParams.value }).then((res) => {
        loading.value = "finished";
        total.value = res?.data?.total;
        if (res?.data?.records && res?.data?.records.length > 0) {
            list.value = list.value.concat(res?.data?.records);
        }
        if (total.value == list.value.length) {
            finishedText.value = "没有更多数据了";
            noLoading.value = true;
        }
    });
}
function detail(id: string) {
    console.log("xxxx");
    uni.navigateTo({ url: `/pages/user/journey/detail?id=${id}` });
}
function handleClick() {
    uni.navigateTo({ url: `/pages/user/journey/plan` });
}
onLoad(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.m-journey {
    padding: 40rpx 0;
}
</style>
